<!DOCTYPE html>
<meta name="viewport" content="width=800">
<script src="../../resources/js-test.js"></script>
<script src="resources/autosizingTest.js"></script>
<style>
  html {
    font-size: 16px;
  }
  body {
    width: 800px;
    margin: 0;
    overflow-y: hidden;
  }
  #inlineToBlock {
    display: inline;
    width: 200px;
    line-height: 30px;
    font-size: 30px;
  }
</style>
<span id="inlineToBlock">
  <div>
    This test verifies that lineHeight values are consistent after display changes.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
    nostrud exercitation ullamco laboris nisiut aliquip ex ea commodo consequat.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
    nostrud exercitation ullamco laboris nisiut aliquip ex ea commodo consequat.
  </div>
</span>
<script>
  var forceLayout1 = document.body.offsetTop;
  var inlineToBlock = document.getElementById('inlineToBlock');
  inlineToBlock.style.display = "block";
  var forceLayout2 = document.body.offsetTop;
  shouldBeEqualToString("window.getComputedStyle(inlineToBlock).lineHeight", "30px");
</script>
